<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<title>color-颜色</title>
		<style>
			body{background: #FFF;}
			.aui-content{padding: 0; box-sizing: border-box;}	
			.content-top{width: 100%; background: #f4f4f4; line-height: 25px; padding: 20px 15px; box-sizing: border-box; font-size: 14px; color: #aaa;}
			.list{width: -webkit-calc((100% - 40px) / 4); width: calc((100% - 40px) / 4); text-align: center; padding: 10px; box-sizing: border-box; display: inline-block; vertical-align: top; margin: 0px 5px; border-radius: 5px;}
			.list-title{width: 100%; height: 40px; line-height: 40px; font-size: 15px; padding-left: 12px; box-sizing: border-box; color: #333; position: relative;}
			.list-title::before{content: ''; width: 3px; height: 14px; background: #03A9F4; border-radius: 5px; position: absolute; top: 13px; left: 0;}
			.list p:first-child{font-size: 14px; color: #FFF; margin-bottom: 5px;}
			.list p:last-child{font-size: 12px; color: #FFF;}
		</style>
	</head>
	<body>		
	    <div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">color-颜色</div>
			</header>
	    	<div class="aui-content" v-cloak>
				<div class="content-top">
					Color-颜色提供多种常用色彩，可点击页面对应色块复制色值。
				</div>
				<ul class="aui-card" v-for="list in lists">
					<div class="aui-card-title"><span class="aui-card-title-line"></span>{{list.title}}</div>
					<li class="aui-card-main">
						<div class="list" v-for="(item, index) in list.items" :style="{background: item.bg}" @click.stop="copyColor(item.bg)">
							<p :style="{color: item.color ? item.color : '#fff'}">{{item.name}}</p>
							<p :style="{color: item.color ? item.color : '#fff'}">{{item.bg}}</p>
						</div>
					</li>
				</ul>
	    	</div>
	    </div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	    <script type="text/javascript" src="../../../lib/vue.min.js"></script>
	    <script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
	    <script type="text/javascript" src="../../../static/js/aui.min.js"></script>
	   	<script type="text/javascript">
	   		window.onload = function(){				
	   			apiready();
	   		}
	   		apiready = function() {
	   			var vm = new Vue({
	   				el: "#app",
	   				data: {	
						lists: [],	   					
	   				},
	   				created: function(){
	   					var _this = this;
						
	   				},
	   				mounted: function() {
	   					var _this = this;	
	   					_this.getColorData();
	   	            },
	   	            updated: function () {
	   	                var _this = this;
	   	                _this.$nextTick(function () {
	   		
	   	                })
	   	            },
	   	            methods: {
						getColorData(){
							var _this = this;
							aui.ajax({
								type: 'get',
								url: 'color.json'
							}).then(function(ret){
								_this.lists = ret;
							});
						},
						copyColor(color){
							aui.copy(color);
							aui.toast({icon: '../../../static/img/success.png', msg: '内容复制成功'});
						},
	   	            }
	   			});
	   		}
	   	</script>
	</body>
</html>
